<template>
  <div id="newzhibo-list" class="divBox">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix1" style="margin-top: 10px">
        <div>
          <router-link :to="{ path: '/marketing/mplivelist/updata' }">
            <el-button size="small" type="primary">添加直播间</el-button>
          </router-link>
          <router-link :to="{ path: '/flow/index' }">
            <el-button size="small" type="primary">充值流量</el-button>
          </router-link>
        </div>
        <div class="new-zhibo-right">
          <div>总充值流量：{{ totalFlux }} GB</div>
          <div>总使用流量：{{ usedFlux }} MB</div>
          <div>总剩余流量：{{ totalUsed }} GB</div>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        size="mini"
        style="width: 100%"
      >
        <el-table-column align="center" label="ID" min-width="50" prop="id"/>
        <el-table-column
          align="center"
          label="直播间名称"
          min-width="50"
          prop="name"
        />
        <el-table-column
          align="center"
          label="直播开始时间"
          min-width="50"
          prop="scheduleTime"
        />
        <el-table-column
          align="center"
          label="推流有效期"
          min-width="50"
          prop="expireTime"
        />
        <el-table-column
          align="center"
          label="直播状态"
          min-width="50"
          prop="status"
        >
          <!-- <template slot-scope="scope">
              <span v-if="scope.row.status==0">未开始</span>
              <span v-if="scope.row.status==1">进行中</span>
              <span v-if="scope.row.status==2">直播中断</span>
              <span v-if="scope.row.status==3">已结束</span>
          </template> -->
        </el-table-column>
        <el-table-column
          align="center"
          label="直播已使用流量(MB)"
          prop="flux"
        />
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 0"
              size="small"
              type="text"
              @click="updata(scope.row)"
            >编辑
            </el-button
            >
            <el-button size="small" type="text" @click="dataInfo(scope.row)"
            >查看推流地址
            </el-button
            >
            <el-button size="small" type="text" @click="detaconsole(scope.row)"
            >控制台
            </el-button
            >
            <!-- <el-button type="text" size="small" @click="shoppupdata(scope.row)"
              >商品管理</el-button
            >
            <el-button type="text" size="small" @click="chouupdata(scope.row)"
              >抽奖管理</el-button
            > -->
            <!-- <el-button type="text" size="small" @click="updatazhi(scope.row)"
              >直播间管理</el-button
            > -->
            <el-button size="small" type="text" @click="share(scope.row)">
              分享
            </el-button>
            <el-button
              v-if="scope.row.status === '直播中' || scope.row.status === '直播中断'" size="small" type="text"
              @click="endzhibo(scope.row)"
            >
              结束直播
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="tableFrom.page"
          :page-size="tableFrom.limit"
          :page-sizes="[20, 40, 60, 80]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog
      v-loading="loading"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      class="PendingDeliveDialog"
      title="直播间推流"
      width="50%"
      @close="dialogVisibleHide"
    >
      <el-row>
        <el-col>
          obs直播: <span>{{ listInfo.stream.obs }} </span>
          <el-tooltip
            class="item"
            content="obs直播推流地址,建议使用电脑直播"
            effect="dark"
            placement="right"
          >
            <i class="el-icon-question" style="margin-left: 10px"></i>
          </el-tooltip>
        </el-col>
        <el-col
        >obskey: <span>{{ listInfo.stream.obskey }}</span>
        </el-col>
        <el-col
        >rtmp: <span>{{ listInfo.stream.rtmp }}</span>
          <el-tooltip
            class="item"
            content="rtmp直播推流地址,建议使用手机直播"
            effect="dark"
            placement="right"
          >
            <i class="el-icon-question" style="margin-left: 10px"></i>
          </el-tooltip>
        </el-col>
        <el-col
        >srt: <span>{{ listInfo.stream.srt }}</span>
        </el-col>
        <el-col
        >webRTC: <span>{{ listInfo.stream.webRTC }}</span>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      v-loading="loading"
      :close-on-click-modal="false"
      :visible.sync="dialogShareVisible"
      class="PendingDeliveDialog"
      title="直播间分享"
      width="50%"
      @close="dialogVisibleHide"
    >
      <el-row>
        <el-col style="display: flex; flex-wrap: wrap">
          <div style="width: 100px; line-height: 36px; text-align: right">微信端链接:</div>
          <el-input v-model="h5url" readonly style="width: 75%; margin-left: 10px"></el-input>
          <el-button style="margin-left: 10px" @click="_copy(h5url)">复制</el-button>
        </el-col>
        <el-col style="display: flex; flex-wrap: wrap">
          <div style="width: 100px; line-height: 36px; text-align: right">二维码:</div>
          <div id="qrCode" ref="qrCodeDiv" style="width: 65%; margin-left: 10px"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getLiveFluxData, getmeizhiInfo, getmeizhilist, liveEnd } from '@/api/marketing'
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      loading: false,
      dialogVisible: false,
      listInfo: {
        stream: {
          obs: '',
          obskey: '',
          rtmp: '',
          srt: '',
          webRTC: ''
        }
      }, //直播间详情
      tableFrom: {
        page: 1,
        limit: 20,
        status: '',
        name: ''
      },
      totalFlux: '', //总充值流量
      totalUsed: '', //总剩余流量
      usedFlux: '', //总使用流量
      dialogShareVisible: false,
      userinfo: '',
      h5url: ''
    }
  },
  created() {
    this.getlist()
    this.getliuliang()
    this.userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {
    // 结束直播
    endzhibo(row) {
      this.$confirm('此操作将结束直播, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        liveEnd(row.id).then(parmas => {
          this.$message({
            type: 'success',
            message: '直播已结束!'
          });
          this.getlist()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    // 复制
    _copy(context) {
      let oInput = document.createElement('input')
      oInput.value = context
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message.success('复制成功')
      oInput.remove()
    },
    // 二维码
    bindQRCode() {
      document.getElementById('qrCode').innerHTML = ''
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.h5url,
        width: 200,
        height: 200,
        colorDark: '#333333', //二维码颜色
        colorLight: '#ffffff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      })
    },
    // 分享
    share(row) {
      this.dialogShareVisible = true
      this.h5url = `${this.userinfo.h5}/pages/users/zhibo/detalis?id=${row.id}`
      setTimeout(() => {
        this.bindQRCode()
      }, 10)
    },
    //查询流量
    getliuliang() {
      getLiveFluxData({}).then((res) => {
        this.totalFlux = res.totalFlux.toFixed(2)
        this.usedFlux = res.usedFlux.toFixed(2)
        this.totalUsed = (
          (Number(this.totalFlux) * 1024 - Number(this.usedFlux)) /
          1024
        ).toFixed(2)
      })
    },
    dialogVisibleHide() {
      this.dialogVisible = false
      this.dialogShareVisible = false
    },
    //查看详情
    dataInfo(row) {
      this.loading = true
      getmeizhiInfo(row.id)
        .then((res) => {
          console.log(res)
          this.loading = false
          this.listInfo = res
          this.dialogVisible = true
        })
        .catch((res) => {
          this.loading = false
        })
    },
    //直播间列表
    getlist() {
      this.listLoading = true
      let parmas = {
        current: this.tableFrom.page,
        size: this.tableFrom.limit
      }
      getmeizhilist(parmas)
        .then((res) => {
          console.log(res)
          this.listLoading = false
          this.total = res.total
          this.list = res.records
        })
        .catch((res) => {
          this.listLoading = false
        })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getlist()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getlist()
    },
    updata(row) {
      console.log(row)
      this.$router.push({ path: '/marketing/mplivelist/updata?id=' + row.id })
    },
    shoppupdata(row) {
      this.$router.push({
        path: '/marketing/mplivelist/shopping?id=' + row.id
      })
    },
    //跳转控制台
    detaconsole(row) {
      this.$router.push({
        path: '/marketing/mplivelist/console',
        query: { Info: JSON.stringify(row) }
      })
    },
    //直播间管理
    updatazhi(row) {
      this.$router.push({ path: '/liveBroadcast?id=' + row.id })
      // this.$router.push({
      //   path: "/marketing/mplivelist/broadcast?id=" + row.id,
      // });
    },
    chouupdata(row) {
      this.$router.push({ path: '/marketing/mplivelist/prize?id=' + row.id })
    }
  }
}
</script>
<style lang="scss" scoped>
.PendingDeliveDialog {
  .el-col {
    padding: 20px;

    span {
      line-height: 20px;
      color: #1890ff;
    }
  }
}

#newzhibo-list {
  .clearfix1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .new-zhibo-right {
      div {
        font-size: 16px;
        font-weight: bold;
      }

      div ~ div {
        margin-top: 10px;
      }
    }
  }
}
</style>
